<style type="text/css">
.company-form{
    float: left;
    border: 5px solid #C6C8C6;
    border-radius: 8px 8px 8px 8px;
    padding: 15px;
    width: 750px;        
}

div.form-wrapper {
    clear: both;
    overflow: auto;
}
div.form-label{
    clear: left;
    color: #777777;
    float: left;
    font-size: 0.9em;
    font-weight: bold;
    margin-bottom: 10px;
    overflow: hidden;
    padding: 4px 15px 0 2px;
    text-align: right;
    width: 150px;
}
div.form-element {
    clear: none;
    float: left;
    margin-bottom: 10px;
    max-width: 600px;
    min-width: 150px;
    overflow: hidden;
    text-align: left;
}
#fieldset-buttons {
    text-align: left;    
    margin-left: 163px;           
}
p.company_link{
    padding: 4px 15px 0 2px;
    width:500px;
    
}
p.company_link img{
    padding-right: 10px;
}

p.company_link.active,p.company_link:hover{
    background: #ECEFF5; 
    cursor: pointer;
}
p.company_link.active{
    padding-left: 15px;
}

p.company_link.create{
    color: #777777;    
    font-size: 0.9em;
    font-weight: bold;
    padding-left: 15px;    
}

#link.readonly{
     background:#f2f2f2; 
     color:#999; 
     border:1px solid #999;    
}

#hints{
    margin: 0 5px 10px 165px;
}
#hints p{
    padding-bottom: 0;
}

#image_upload{
    margin-left: 165px;
    margin-bottom: 15px;    
}
#image_upload.disabled{
    background: none repeat scroll 0 0 #F2F2F2;
    color: #111111;
}

#image{
    background: no-repeat scroll center center;
    float: left;  
    margin-left: 10px;
    /*margin-top: 40px;*/
    width: 100px;
    height: 100px;
    border: 1px solid #C6C8C6;
    border-radius: 8px 8px 8px 8px;
    z-index: 99;
}
#country_id-element{
	position: relative;
}
</style>
<div class="company-form">
<?php //echo $this->form->render($this) ?>

<!-- <div id="image"></div>-->
<form id="<?php echo $this->form->getAttrib('id');?>" name="<?php echo $this->form->getAttrib('name');?>" enctype="multipart/form-data" action="<?php echo $this->escape($this->form->getAction()) ?>" method="<?php echo $this->escape($this->form->getMethod()) ?>" class="global_form">
    <div style="width:100%">
        <div>
            <h3>
                <?php echo $this->translate($this->form->getTitle()) ?>
            </h3>
            <p class="form-description"><?php //echo $this->translate($this->form->getDescription()) ?></p>
            <div class="form-elements">
                <?php if($this->form->getDecorator('FormErrors')) echo $this->form->getDecorator('FormErrors')->setElement($this->form)->render("");?>
                <?php if($this->form->getDecorator('FormMessages')) echo $this->form->getDecorator('FormMessages')->setElement($this->form)->render("");?> 
                
                <?php echo $this->form->title; ?>
                <?php echo $this->form->key; ?>
                <?php echo $this->form->description; ?>
                
                <div class="form-wrapper" id="image-wrapper"><div class="form-label" id="image-label"><label class="" for=""></label></div>
					<div class="form-element" id="image-element">
						<?php if($this->photo_url):?>
                        <div id="image" style="background-image: url(<?php echo $this->photo_url?>);: ;"></div>
                        <?php else:?>
                        <div id="image"></div>
                        <?php endif;?>
					</div>
				</div>
                
                <?php echo $this->form->image_upload; ?>
                <?php echo $this->form->file_id; ?>
                <?php echo $this->form->comp_id; ?>
                
                <?php echo $this->form->buttons; ?>
            </div>
         </div>
    </div>
</form> 
</div>               
<script type="text/javascript">

function cancelCreate(){
    var href = en4.core.baseUrl + 'webmix/index/index/webmix/<?php echo $this->webmix_id?>'
    this.location.href = href;   
}
function openUploadform(){
    var href = en4.core.baseUrl + 'webmix/album/upload';
    this.Smoothbox.open(href);        
}

function setPhoto($photo_url,$photo_id){
    //console.log($photo_url); 
    $('file_id').set('value',$photo_id);
    $('image').setStyle('background-image','url('+$photo_url+')');            
}

</script>

<?php 
    if (!empty($this->action_type) ) :
?>
<style>
#key-wrapper,
#description-wrapper,
#image_upload
{
    display:none;
}

#loading_album{
    display: none;
    float: left;
    height: 40px;
    margin-left: 8px;
    width: 40px;
}
</style>
<script>
var dataAlbum = null;
var loadingElement = null;
var albumsElement = null;
 var addElementLoading = function(){
    var loading = new Element('div',{
        'id':'loading_album',
        'class': 'loading_album',
        'html' : '<img src="'+ en4.core.baseUrl + 'application/modules/Core/externals/images/loading.gif' +'">'
    });
    
    loading.inject($('title-wrapper'));
    loadingElement = loading;
 }  
 var addElementAlbum = function(){
    var loading1 = new Element('div',{
        'id':'album_loadingdb',
        'class': 'album_loadingdb form-wrapper',
        
    });
    loading1.inject($('title-wrapper'),'after');
    albumsElement = loading1;
 }
 var Fill = function(id){
   // $('key-wrapper').setStyle('display','block');  
    $('key').set('value',dataAlbum[id].key);    
  //  $('description-wrapper').setStyle('display','block');   
    $('description').set('value',dataAlbum[id].description);
    $('image-wrapper').setStyle('display','block'); 
    $('image').setStyle('background-image','url('+dataAlbum[id].photo_url+')');
    $('buttons-wrapper').setStyle('display','block');
    $$('.submit_musicalbum_id').destroy();
    $('submit').style.display = '';
    var musicalbum_id = new Element('input',{
        'type': 'hidden',
        'value': dataAlbum[id].musicalbum_id,
        'name' :'musicalbum_id',
        'class' :'submit_musicalbum_id'
    });
    musicalbum_id.inject($('title-wrapper'));
    
   
            
 }
 var autoSearchName = function(){
    $('title').addEvent('keyup', function(e){ 
		if($(this).get('value').length < 3) return;
     request = new Request.JSON({
          url : en4.core.baseUrl + 'webmix/ajax/get-company',
          data : {
            format : 'json',
            'content_type': 'music',
            'webmix_id': '<?php echo $this->webmix_id?>',
            name : $(this).get('value')
          },
          onRequest: function(){
            //$('hints').set('html', '<img src="'+ en4.core.baseUrl + 'application/modules/Core/externals/images/loading.gif' +'">');
            loadingElement.style.display = 'block';
            // $('buttons-wrapper').setStyle('display','none');
              $('key').set('value','');
              $$('.submit_musicalbum_id').destroy();
          },
          onComplete: function(response) {
            loadingElement.style.display = 'none';
            dataAlbum = response;
            
            if (response.length <= 0){
                $('buttons-wrapper').setStyle('display','block');
                $('submit').style.display = '';
                $('cancel').setStyle('display','');
            
                $('key-wrapper').setStyle('display','none'); 
                $('image-wrapper').setStyle('display','block'); 
    
                albumsElement.set('html','<div class="form-label"></div><div class="form-element tip"> <span> Music does not exist in database. Click <a href="http://www.gaygirlsconnect.com/help/contact">here</a> to request </span></div>');
                return;
            }
            name = "";
            for(var i = 0; i < response.length; i++){
                name += "<p class='company_link' id='"+i+"'>"+response[i]['title']+"</p>";    
          
            }
            name += '<p class="company_link"> <a class="company_link" href="http://abc.com">Request album</a></p>';
            albumsElement.set('html','<div class="form-label"></div><div class="form-element">'+name+'</div>');
            $$('p.company_link').each(function(el){
                $(el).addEvent('click',function(e){
                    $$('p.company_link').removeClass('active');
                    $(this).addClass('active');
                    $('comp_id').set('value',dataAlbum[$(this).get('id')].musicalbum_id);
                    Fill($(this).get('id'));
                });
            });
            
           }
        });
        request.send();
    }); 
 }
 autoSearchName();
 addElementLoading();
 addElementAlbum();
</script>
<?php endif;?>